<template>
  <div class="accountInfo">
     <div class="account">
        <div class="account_title">专户信息</div>
    </div>
    <div>
      <a-table :columns="columns" :data-source="data" @change="onChange" >
      <div class="td_name" slot="voucher" slot-scope="text" @click="showPdf">{{ text }}</div>
      </a-table>
    </div>
    <!-- 查看pdf -->
    <a-modal
      v-model="visible"
      title
      @ok="handleOk"
      :footer="null"
      :maskClosable="false"
    >
      <embed
        width="1000"
        height="700"
        src="http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf"
        type
      />
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "开户银行",
          dataIndex: "blank",
          align:"center"
        },
        {
          title: "工资专用账号",
          dataIndex: "wagesNum",
          align:"center"
        },
        {
          title: "工资专户流水号",
          dataIndex: "waterNum",
          align:"center"
        },
        {
          title: "累计发放工资（元）",
          dataIndex: "total",
          align:"center"
        },
        {
          title: "开户凭证",
          dataIndex: "voucher",
          align:"center",
          key: "voucher",
          scopedSlots: { customRender: "voucher" }
        },
      ],
      data: [
        {
          key: "1",
          blank: "南京银行",
          wagesNum: "6228480395558263277",
          waterNum: 2541254120321,
          total: "14541254.32",
          voucher: "开户凭证.pdf",
        },
      ],
      visible :false
    };
  },
  methods: {
    onChange(pagination, filters, sorter) {
      console.log("params", pagination, filters, sorter);
    },
     pdfView() {
      window.open(
        "http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf"
      );
    },
    showPdf() {
      this.visible = true;
    },
    handleOk(e) {
      //   console.log(e);
      this.visible = false;
    }
  },
};
</script>

<style scoped>
::v-deep .ant-table-pagination.ant-pagination {
  display: none;
}
.account{
    height: 45px;
    /* border-bottom: 1px solid #ccc; */
    margin-bottom: 30px;
}
.account_title{
    width: 90px;
    height: 45px;
    font-size: 16px;
    line-height: 45px;
    color: #1890ff;
    border-bottom:2px solid #1890ff;
    text-align: center;
    margin-left: 30px;
}
.td_name{
    color: #1890ff;
    cursor: pointer;
}
::v-deep .ant-modal {
  width: 1080px !important;
  top:10px
}
::v-deep .ant-modal-body {
  padding: 40px;
  height: 780px;
}
</style>
